<template>
    <div class="sides">
        <el-radio-group v-model="isCollapse" class="col-style">
            <el-radio-button :label="false" type="warning">展开列表</el-radio-button>
            <el-radio-button :label="true" type="warning">收起列表</el-radio-button>
        </el-radio-group>
    
    <!-- 下拉列表以及页面跳转 -->
    <el-menu 
    class="el-menu-vertical"
    :default-active="routers"
    :collapse="isCollapse"
    background-color="rgb(70, 66, 66)"
    text-color="#fff"
    active-text-color="#ffd04b"
    unique-opened
    router
    collapse-transition="true"
    @open="handleOpen"
    @close="handleClose"
    >
    <template v-for="tree in trees">
        <el-menu-item :index="tree.index" >
            <i :class="tree.icon"  style="right: 0px;"></i>
            <span slot="title">{{tree.name}}</span>
        </el-menu-item>
    </template>
    </el-menu>
    </div>

</template>

<script>
    export default {
        name: 'treeMenu',
        data() {
            return {
                isCollapse: false,
                trees: [
                    {icon:'el-icon-cpu',index:'/header',name:'首页文件'},
                    {icon:'el-icon-mic',index:'/goods',name:'货物详情情况'},
                    {icon:'el-icon-camera',index:'/test',name:'系统测试'},
                    {icon:'el-icon-s-home',index:'/index',name:'系统转库存首页'},
                    {icon:'el-icon-help',index:'/charts',name:'流量热力图'}
                ]
            }
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath)
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath)
            }
        },
        computed:{
            routers(){
                return this.$router.path
            }
        },
        created() {
          
        }
        
    }

</script>

<style scoped>
    .sides {
        display: block;
        position: absolute;
        left: 0;
        top: 80px;
        bottom: 0;
        overflow-y:scroll;
    }
    .el-menu-vertical:not(.el-menu--collapse) {
        width: 200px;
        /* min-height: 400px; */
    }
    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸 ,只有谷歌浏览器生效*/
.sides::-webkit-scrollbar{
    width: 0;
}
    .col-style {
        margin-left: 0%;
        margin-bottom: 4px;
    }
    .sides > ul {
        height: 100%;
    }
</style>